<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../../css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/list.css"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="user_list" class="tab tab-hover">
    <script>
        $(function () {
            $("#user_list").bootstrapTable({
                /*传递配置*/
                url: "/user/list.do",     //数据地址
                striped: "true",      			//是否显示行间间隔
                pageNumber: 1,				//初始化加载第几页
                pagination: true,			//是否分页
                sidePagination: 'server',     //是服务器分页还是 页面分页  服务器分页就是按照我们在服务器中接收到的的分页数和起始索引
                pageSize: 5,					//每页显示的条数
                pageList: [5, 10, 15, 20],     	//可以按照这个里面的数值设置每页显示的条数
                showRefresh: true,			//是否有刷新按钮

                queryParmas: function (params) {   //将上面设置好的参数比如 起始索引offset 和 每页显示条数pageNumber
                    var temp = {
                        offset: params.offset,           //这里的params是bootstrap-table中的控件的参数
                        pageNumber: params.limit
                    };
                    return temp;
                },

                columns: [
                    {
                        title: "编号",
                        field: "id",
                        sortable: true	//是否设置排序按钮
                    },
                    {
                        title: "昵称",
                        field: "userName",
                        sortable: false
                    },
                    {
                        title: "手机号码",
                        field: "userPhone",
                        sortable: false
                    },
                    {
                        title: "密码",
                        field: "password",
                        sortable: false
                    },

                    {
                        title: "注册时间",
                        field: "createTime",
                        sortable: false
                    },
                    {
                        title: "上次登录时间",
                        field: "loginTime",
                        sortable: false
                    },


                ]

            });
        });
    </script>
</table>

</body>
</html>
